// view width > $query 生效
@mixin min-width-media($query) {
    @media (min-width: $query) {
        @content;
    }
}

// view width < $query 生效
@mixin max-width-media($query) {
    @media (max-width: $query) {
        @content;
    }
}

@mixin media($min-width, $max-width) {
    @media (min-width: $min-width) and (max-width: $max-width) { 
        @content;
    }
}